<template>
  <div class="app-container">
    <aside>图片 与 base64 之间相互转换</aside>
    <div style="padding: 8px 24px">
      <el-row :gutter="12">
        <el-col :span="11">
          <div
            style="
              width: 100%;
              height: 78vh;
              border: 1px solid #666;
              border-radius: 5px;
            "
          >
            <el-upload
              class="avatar-uploader"
              action="/api/api/uploadImages"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <div class="uploadImage">
                <img v-if="imageUrl" :src="imageUrl" />
                <el-button v-else type="primary">点击上传图片</el-button>
              </div>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="centerButton">
            <el-button type="primary"
              ><i class="el-icon-arrow-left"
            /></el-button>
            <br />
            <el-button type="primary"
              ><i class="el-icon-arrow-right"
            /></el-button>
          </div>
        </el-col>
        <el-col :span="11">
          <div
            style="
              width: 100%;
              height: 78vh;
              border: 1px solid #666;
              border-radius: 5px;
            "
          >
            <textarea
              placeholder="base64"
              style="width: 100%; height: 100%"
              class="textarea"
              v-model="imageUrl"
            ></textarea>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "",
    };
  },

  methods: {
    // 图片上传成功
    handleAvatarSuccess(res) {
      this.imageUrl = res.data || "";
    },
  },
};
</script>

<style scoped>
.centerButton {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 78vh;
}

.textarea {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  outline: none;
  color: #666;
  font-size: 12px;
  border: none;
  overflow-y: scroll;
  white-space: break-all;
}

.uploadImage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}

.uploadImage .icon {
  font-size: 8rem;
  font-weight: 400;
}

>>> .avatar-uploader {
  width: 100% !important;
  height: 100% !important;
}

>>> .el-upload,
>>> .el-upload--text {
  width: 100% !important;
  height: 100% !important;
}
</style>
